<template>
    <div id="header">
        <img src="../../static/images/logo.png" alt="">
        <ul>
            <li v-for="(item,index) in headerlist" :key="item" :class="activenum==index?'active':''">
                {{item}}</li>
        </ul>
        <input type="text" placeholder="搜索">
    </div>
</template>
<script>
export default{
    name:"zHeader",
    data(){
        return {
            headerlist:["首页","发现","等你来答"],
            activenum:0
            }
            
    }
}
</script>
<style scoped>
#header{
    width: 100%;
    height: 70px;
    background-color: white;
}
img{
    float: left;
    margin-left: 30px;
    margin-right: 50px;
}

li{
    list-style: none;
    float: left;
    height: 70px;
    line-height: 70px;
    margin-right: 20px;
    border-bottom: 2px solid white;
    padding:0 10px;
}
input{
    margin-left: 500px;
    margin-top: 20px;
    padding: 10px;
    background-color:rgb(246,246,246) ;
    border: none;
}
.active{
    font-weight: bolder;
    border-bottom: 2px solid skyblue;
    
}
</style>